Expand description
Yew Hooks
Hooks for Yew, inspired by streamich/react-use and alibaba/hooks.
Examples
use yew::prelude::*;
use yew_hooks::use_counter;
#[function_component(Counter)]
fn counter() -> Html {
let counter = use_counter(0);
let onincrease = {
let counter = counter.clone();
Callback::from(move |_| counter.increase())
};
let ondecrease = {
let counter = counter.clone();
Callback::from(move |_| counter.decrease())
};
let onincreaseby = {
let counter = counter.clone();
Callback::from(move |_| counter.increase_by(10))
};
let ondecreaseby = {
let counter = counter.clone();
Callback::from(move |_| counter.decrease_by(10))
};
let onset = {
let counter = counter.clone();
Callback::from(move |_| counter.set(100))
};
let onreset = {
let counter = counter.clone();
Callback::from(move |_| counter.reset())
};
html! {
<div>
<button onclick={onincrease}>{ "Increase" }</button>
<button onclick={ondecrease}>{ "Decrease" }</button>
<button onclick={onincreaseby}>{ "Increase by 10" }</button>
<button onclick={ondecreaseby}>{ "Decrease by 10" }</button>
<button onclick={onset}>{ "Set to 100" }</button>
<button onclick={onreset}>{ "Reset" }</button>
<p>
<b>{ "Current value: " }</b>
{ *counter }
</p>
</div>
}
}Demo
Modules
Structs
The
CloseEvent class.State for brower’s location.
State handle for the
use_async hook.Options for
use_async_with_options.State for an async future.
State handle for the
use_clipboard hook.State handle for the
use_counter hook.State handle for the
use_debounce hook.State handle for the
use_debounce_state hook.State handle for the
use_default hook.State handle for the
use_drag hook.Options for drag.
State handle for the
use_drop hook.Options for drop.
The
PositionOptions dictionary.State handle for the
use_hash hook.State handle for the
use_latest hook.State handle for the
use_list hook.State handle for the
use_local_storage hook.State handle for the
use_map hook.State handle for the
use_media hook.Options for media
State handle for the
use_mut_latest hook.State handle for the
use_previous hook.State handle for the
use_queue hook.State handle for the
use_raf_state hook.State handle for the
use_session_storage hook.State handle for the
use_set hook.State handle for the
use_state_ptr_eq hook.State handle for the
use_swipe hook.Options for swipe.
State handle for the
use_throttle hook.State handle for the
use_throttle_state hook.State handle for the
use_timeout hook.State handle for the
use_toggle hook.State handle for the
use_websocket hook.Options for
WebSocket.Enums
Swipe direction.
The current state of the
WebSocket connection.Functions
This hook returns state and a
run callback for an async future.This hook returns state and a
run callback for an async future with options.
See use_async too.A side-effect hook that shows browser alert when user try to reload or close the page.
This hook is a simplified
use_toggle to manage boolean toggle state in a function component.A hook that triggers a callback when user clicks outside the target element.
This hook is used to read from or write to clipboard for text or bytes.
e.g. copy plain text or copy
image/png file to clipboard.This hook is used to manage counter state in a function component.
A hook that delays invoking a function until after wait milliseconds have elapsed
since the last time the debounced function was invoked.
A hook that delays calling effect callback until after wait milliseconds have elapsed
since the last time effect callback was called.
This hook is similar to
use_debounce_effect but it accepts dependencies.A hook that delays updating state until after wait milliseconds have elapsed
since the last time state was updated.
A state hook that returns the default value when state is None.
This hook tracks file, link and copy-paste drags.
This hook tracks file, link and copy-paste drags.
use_drag hook with options.This hook tracks file, link and copy-paste drops.
This hook tracks file, link and copy-paste drops.
use_drop hook with options.A lifecycle hook that runs an effect only once.
This hook ignores the first invocation (e.g. on mount).
The signature is exactly the same as the
use_effect hook.This hook is similar to
use_effect_update but it accepts dependencies.
The signature is exactly the same as the use_effect_with_deps hook.A hook that subscribes a callback to events.
A hook that subscribes a callback to events only for window.
If you want to specify an event target, use
use_event.A side-effect hook that sets favicon of the page.
A sensor hook that tracks user’s geographic location.
A sensor hook that tracks user’s geographic location.
See
use_geolocationA sensor hook that tracks brower’s location hash value.
A sensor hook that tracks infinite scrolling of the element.
A hook that schedules an interval to invoke
callback every millis milliseconds.
The interval will be cancelled if millis is set to 0.A hook returns true if component is just mounted (on first render) and false otherwise.
A hook returns true if component is mounted and false otherwise.
This hook returns the latest immutable ref to state or props.
A hook that tracks a list and provides methods to modify it.
A side-effect hook that manages a single localStorage key.
A sensor hook that tracks brower’s location value.
This hook logs in console as component goes through life-cycles.
This hook logs in console as component goes through life-cycles.
Like
use_logger but only logs when prev_state != next_state.
This requires the props to implement PartialEq.A hook that tracks a hash map and provides methods to modify it.
A sensor hook that tracks an HTML element’s dimensions using the
ResizeObserver API.This hook plays video or audio and exposes its controls.
This hook plays video or audio and exposes its controls with options.
see
use_mediaA lifecycle hook that calls a function after the component is mounted.
This hook returns the latest mutable ref to state or props.
This hook returns the previous immutable ref to state or props.
A hook that tracks a queue and provides methods to modify it.
An animation hook that forces component to re-render on each
requestAnimationFrame,
returns percentage of time elapsed. millis - milliseconds for how long to keep re-rendering component.
delay — delay in milliseconds after which to start re-rendering component.A state hook that only updates state in the callback of
requestAnimationFrame.A hook that counts component renders.
A sensor hook that tracks an HTML element’s scroll position.
A sensor hook that tracks whether HTML element is scrolling.
A sensor hook that tracks brower’s location search param value.
A side-effect hook that manages a single sessionStorage key.
A hook that tracks a hash set and provides methods to modify it.
A sensor hook that tracks an HTML element’s dimensions using the
ResizeObserver API.Similar to
use_state_eq, but check if the two Rcs of values point to the same allocation,
instead of PartialEq of the values.A sensor hook that detects swipe based on TouchEvent.
A sensor hook that detects swipe based on TouchEvent with options.
If you want to detect for window, pass
NodeRef::default() to param node.A sensor hook that detects swipe based on TouchEvent for window.
See
use_swipe.A hook that throttles invoking a function, the function is only executed once every
millis.A hook that throttles calling effect callback, it is only called once every
millis.This hook is similar to
use_throttle_effect but it accepts dependencies.A hook that throttles updating state, the state is only updated once every
millis.A hook that schedules a timeout to invoke
callback in millis milliseconds from now.
The timeout will be cancelled if millis is set to 0 or cancel() is called.A side-effect hook that sets title of the page and restore previous title when unmount.
This hook is used to manage toggle state in a function component.
A lifecycle hook that calls a function when the component will unmount.
A hook returns a function that forces component to re-render when called.
This hook communicates with
WebSocket.This hook communicates with
WebSocket with options.A sensor hook that tracks Window scroll position.
A sensor hook that tracks dimensions of the browser window.